<template>
	<view class="contact">
		<view class="list">
			<view v-for="(item1,index) in dataInfo.date" :key='index'>
				<view class="title" @click="linkOthers(item1.url)">{{index+1}}·{{item1.biaoti}}</view>
				<view class="num">{{item1.redu}}</view>
				<!-- <view class="title">{{item1.url}}</view> -->
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {},
				dataInfo: []
			}
		},
		methods: {
			
			init() {
				let that = this
				uni.request({
					url: `https://api.oddfar.com/resou/jrrs-bd.php?n=0`,
					method: "GET",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						if (that.item.name === '微博热搜') {
							that.dataInfo = res.data.date[0]
							console.log(that.dataInfo, '数据')
						}
						if (that.item.name === '知乎热榜') {
							that.dataInfo = res.data.date[1]
						}
						if (that.item.name === '24h热文榜') {
							that.dataInfo = res.data.date[2]
						}
						if (that.item.name === '实时热点') {
							that.dataInfo = res.data.date[3]
						}
					}
				})
				uni.setNavigationBarTitle({
					title: that.item.name
				});
			},
			linkOthers(url1) {
				var url = "https://www.baidu.com";	
				uni.navigateTo({
					// 此处的链接为小程序上面新建的webview页面路径，参数url为要跳转外链的地址
					// url: "/pages/common/linkOthers/linkOthers?url=" + encodeURIComponent(url)
					url: "/pages/language/component/web-view?url=" + encodeURIComponent(url1)
				});

			}

		},
		onLoad(option) {
			this.item = JSON.parse(decodeURIComponent(option.obj));
			this.init()

		}
	}
</script>

<style lang="scss" scoped>
	.contact {
		position: relative;
		height: 100%;
		padding: 10upx;

		.list {
			// padding: 100upx 30upx;
			font-size: 32upx;
			background-color: #fff;
			color: #8A2BE2;
			padding: 20upx;

			// margin-bottom: 100upx;
			view {
				padding: 20upx 0;
				line-height: 50upx;
				background-color: #fff;

				// display: flex;
				// justify-content: space-between;
				.title {
					width: 75%;
					float: left;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					padding-right: 30upx;
				}

				.num {
					width: 25%;
					float: right;
					color: red;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 26upx;
				}

			}
		}
	}
</style>
